<template>
  <div class="course-item-content clearfix" v-if="itemObj">
    <div class="clearfix">
      <div class="course-img-box">
        <img class="course-img" v-if="itemObj.picPath" @click="loadTcourse(itemObj)"  src="~@assets/images/course_login.png" v-real-img="itemObj.picPath" alt="">
        <img class="course-img" v-if="!itemObj.picPath" @click="loadTcourse(itemObj)"  src="~@assets/images/course_login.png" alt="">
      </div>
      <div class="course-detail" :style="{width: width}">
        <div class="course-info">
          <div class="title ellipsis-one" :title="$utils.setText(itemObj.name)">{{$utils.setText(itemObj.name)}}</div>
          <div class="">授课老师： {{itemObj.teacherName}}</div>
          <div class="">发布时间： {{itemObj.publishTime.substring(0,10)}}</div>
          <div class="">总时长：{{Number(itemObj.length) / 60}} 分钟     <img src="~@assets/images/training-time.png" alt="">{{itemObj.credit}}学时</div>
          <div class="">学习人数：{{itemObj.learnCount}}</div>
        </div>
        <div class="study-status">
          <img v-if="itemObj.schedule && itemObj.schedule.indexOf('100') !== -1" src="~@assets/images/complete-course.png" alt="">
          <img v-else src="~@assets/images/uncomplete-course.png" alt="">
        </div>
      </div>
    </div>

    <div class="course-btn" @click="showList(itemObj.courseId,itemObj)">
      <span v-if="showMore">展开  <i class="el-icon-caret-bottom"></i></span>
      <span v-else>收起 <i class="el-icon-caret-top"></i></span>
    </div>
    <div class="course-resouse" v-if="!showMore">
      <ul>
        <li v-for="(courseWare,courseWareIndex) in itemObj.courseWareList" :key="courseWare.id">
          <div>
            <h4>课</h4>
            <div class="course-learning-progress" @click="updateProgress(courseWare,itemObj.courseWareList,courseWareIndex)">
              <div class="learned-section" :style="{'width':courseWare.schedule+'%'}">
                <div class="learned-section-num">{{courseWare.schedule}}%</div>
              </div>
            </div>
            <div class="required-course-play" @click="studyCourseware(itemObj.courseId,courseWareIndex,courseWare)">
              <span>播放</span>
            </div>
          </div>
          <div class="course-learning-words-progress" >
          <span >点击次数：{{courseWare.learnCount || 0}}次</span><span>最后学习时间：{{courseWare.learnTime}}</span>
          <span>时长：{{Number(courseWare.length) / 60 }}分钟</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {getCoursewareList} from "@/api/training-detail";
  import {getCoursewareInfo} from "@/api/courseware-study";

  export default {
    name: "index",
    props: {
      width:{
        default:"509px",
        type: String,
      },
      itemObj:{
        require:true,
        type: Object,
      },
    },
    data(){
      return{
        showMore :true,
        courseWareList:[]
      }
    },
    methods:{
      loadTcourse(itemObj){
        this.$router.push({
          path:"/course/singleCourseInfo",
          query:{
            courseId:itemObj.courseId
          }
        })
      },


      showList(id,itemObj){
        this.showMore = !this.showMore;
        var data = {
          bindYear: "",
          courseId:id,
          tcId: ""
        }
        getCoursewareList(data).then((response) => {
          this.$set(itemObj, 'courseWareList', response.data)
        }).catch((err) => {
          this.$message.error(err.message)
        });
      },
      studyCourseware(courseId,courseWareIndex, courseWareObj) {
        let routerJump = this.$router.resolve({
          path: "/studycourseware",
          query: {
            courseId: courseId,
            coursewareId: courseWareObj.id,
            courseWareIndex,
            preview:"1"
          }
        });
        window.open(routerJump.href, '_blank');
      },
      updateProgress( courseWareObj,courseWareList,courseWareIndex){
        var data = {
          tcid:"",
          courseId: this.itemObj.courseId,
          coursewareId: courseWareObj.id,
        };
        getCoursewareInfo(data).then((response) =>{
          if (response.data) {
            courseWareList[courseWareIndex].schedule = response.data.schedule;
            courseWareList[courseWareIndex].learnCount = response.data.learnCount;
            courseWareList[courseWareIndex].learnTime = response.data.learnTime;
          }
        }).catch((err) =>{
          this.$message.error(err.message || 'error')
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";
  @import "index";
</style>
